<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入 echarts.js -->
    <!-- <script src="echarts/echarts.min.js"></script> -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    
</head>
<body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="widows: 500px; height: 500px">
        
    </div>

    <script>
        // 基于准备好的dom，初始化echarts实例
        let mychart =echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        let option = {
            title:{
                text: '第一个echarts实例'
            },
            tooltip:{},
            legend:{
                orient:"vertical",
                left:"left",
                top:"30px",
                data: ['直接访问','数据访问','邮件访问','移动访问','电信访问','带宽访问','个人访问','间接访问','业务访问',]
            },
            // xAxis:
            //     data:["衬衫","T血","裤子","卫衣","袜子"]
            // },
            // yAxis:{},
            series:[{
                name: "访问来源",
                type: "pie",
                radius:"50%",
                // roseType:'radius',
                content:["50%","60%"],
                label:{
                    normal:{
                        show: true,
                        position:'outside',
                        
                        format:"{a}:{b}({d}%)",

                    }
                },
                data: [
                    {value:335,name:'直接访问'},
                    {value:325,name:'数据访问'},
                    {value:335,name:'邮件访问'},
                    {value:435,name:'移动访问'},
                    {value:635,name:'电信访问'},
                    {value:356,name:'带宽访问'},
                    {value:245,name:'个人访问'},
                    {value:105,name:'间接访问'},
                    {value:55,name:'业务访问'},
            
                ]
            }]
        };

        // 显示图表
        mychart.setOption(option);
    </script>
</body>
</html>